<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 产品列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
        <el-date-picker class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                        v-model="query.time">
        </el-date-picker>
        <el-select v-model="query.shang" filterable placeholder="选择产品状态" class="mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="已上架" value="0"></el-option>
          <el-option label="未上架" value="1"></el-option>
        </el-select>
        <el-select v-model="query.status" filterable placeholder="选择绑定经理状态" class="mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="未绑定" value="0"></el-option>
          <el-option label="已绑定" value="1"></el-option>
        </el-select>
      </div>
      <div class="handle-box">
        <el-input placeholder="请输入产品名称查询" class="handle-input mr10" v-model="query.kw"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="type.ptName" width="200" label="产品分类"></el-table-column>
        <el-table-column prop="pName" label="产品名称"></el-table-column>
        <el-table-column prop="pic" label="产品图">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.pic" :preview-src-list="[scope.row.pic]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column fixed="right" label="上架状态" width="150" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isShow == 0" type="primary">未上架</el-tag>
            <el-tag v-if="scope.row.isShow == 1" type="success">已上架</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="绑定业务经理状态" width="150" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isBind == 0" type="primary">未绑定</el-tag>
            <el-tag v-if="scope.row.isBind == 1" type="success">已绑定</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isShow == 0" type="text" icon="el-icon-edit" class="red" @click="upNextClick(scope.row.pId,1)">上架</el-button>
            <el-button v-if="scope.row.isShow == 1" type="text" icon="el-icon-edit" class="red" @click="upNextClick(scope.row.pId,0)">下架</el-button>
            <el-button type="text" icon="el-icon-edit" class="red" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.pId)">删除</el-button>
            <el-button type="text" icon="el-icon-edit" class="red" @click="managerClick(scope.row.pId)">绑定业务经理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>
    <!-- 产品 -->
    <el-drawer :visible.sync="drawer.flg" :with-header="false" direction="rtl" size="65%">
      <el-form ref="form" :model="drawer.form" label-width="100px" class="drawerCan">
        <el-form-item label="产品分类">
          <el-select v-model="drawer.form.classid" placeholder="请选择产品分类" style="width:100%;" @change="classChange">
            <el-option v-for="item in drawer.classArr" :label="item.ptName" :value="item.ptId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品贷款类型">
          <el-checkbox-group v-model="drawer.form.leiid">
            <el-checkbox :label="0" name="type">不限</el-checkbox>
            <el-checkbox v-for="item in drawer.typeArr" :label="item.ptId" name="type">{{item.ptName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="产品针对用户">
          <el-checkbox-group v-model="drawer.form.userid">
            <el-checkbox :label="0" name="type">不限</el-checkbox>
            <el-checkbox v-for="item in drawer.userArr" :label="item.ptId" name="type">{{item.ptName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="产品贷款用途">
          <el-checkbox-group v-model="drawer.form.yongid">
            <el-checkbox :label="0" name="type">不限</el-checkbox>
            <el-checkbox v-for="item in drawer.yongArr" :label="item.ptId" name="type">{{item.ptName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="产品贷款期限">
          <el-checkbox-group v-model="drawer.form.qiid">
            <el-checkbox :label="0" name="type">不限</el-checkbox>
            <el-checkbox v-for="item in drawer.qiArr" :label="item.ptId" name="type">{{item.ptName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="产品还款方式">
          <el-checkbox-group v-model="drawer.form.huanid">
            <el-checkbox :label="0" name="type">不限</el-checkbox>
            <el-checkbox v-for="item in drawer.huanArr" :label="item.ptId" name="type">{{item.ptName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="所属城市">
          <el-cascader v-model="drawer.form.citystr" :options="cityArr" @change="cityChange" style="width:100%;"></el-cascader>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="drawer.form.name"></el-input>
        </el-form-item>
        <el-form-item label="产品展示图">
          <el-image v-if="drawer.form.img" style="width: 100px; height: 100px" :src="drawer.form.img" :preview-src-list="[drawer.form.img]">
          </el-image>
          <el-upload v-if="drawer.form.img" action="javascript:;" :before-upload="upimg" accept=".png,.jpg" :show-file-list="false">
            重新上传
          </el-upload>
          <el-upload v-if="!drawer.form.img" action="javascript:;" :before-upload="upimg" accept=".png,.jpg" list-type="picture-card"
                     :show-file-list="false">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="产品特色">
          <el-checkbox-group v-model="drawer.form.seid">
            <el-checkbox v-for="item in drawer.teArr" :label="item.ptId" name="type">{{item.ptName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="业务类型">
          <div v-for="(item,i) in drawer.form.yelei" style="margin-bottom:20px;">
            <div style="padding-left:20px;position: relative;">
              <el-input v-model="item.name" placeholder="类型名称" style="margin-bottom:5px"></el-input>
              <el-input v-model="item.content" placeholder="类型说明"></el-input>
              <i v-if="i != 0" class="iconfont el-icon-close" style="position: absolute;left: 0;top: 25px;cursor: pointer;"
                 @click="delArr('1', i)"></i>
            </div>
          </div>
          <el-button icon="el-icon-plus" type="text" @click="addArr('1')">添加业务类型</el-button>
        </el-form-item>
        <el-form-item label="申请条件">
          <div v-for="(item,i) in drawer.form.shenstr" style="margin-bottom:10px;">
            <div style="padding-left:20px;position: relative;">
              <el-input v-model="item.name" placeholder="申请条件" style="margin-bottom:5px"></el-input>
              <i v-if="i != 0" class="iconfont el-icon-close" style="position: absolute;left: 0;top: 10px;cursor: pointer;"
                 @click="delArr('2',i)"></i>
            </div>
          </div>
          <el-button icon="el-icon-plus" type="text" @click="addArr('2')">添加申请条件</el-button>
        </el-form-item>
        <el-form-item label="准备资料">
          <div v-for="(item,i) in drawer.form.zhunbei" style="margin-bottom:10px;">
            <div style="padding-left:20px;position: relative;">
              <el-input v-model="item.name" placeholder="准备资料" style="margin-bottom:5px"></el-input>
              <i v-if="i != 0" class="iconfont el-icon-close" style="position: absolute;left: 0;top: 10px;cursor: pointer;"
                 @click="delArr('3',i)"></i>
            </div>
          </div>
          <el-button icon="el-icon-plus" type="text" @click="addArr('3')">添加准备资料</el-button>
        </el-form-item>
        <el-form-item label="贷款介绍">
          <div v-for="(item,i) in drawer.form.jieshao" style="margin-bottom:10px;">
            <div style="padding-left:20px;position: relative;">
              <el-input v-model="item.name" placeholder="贷款介绍" style="margin-bottom:5px"></el-input>
              <i v-if="i != 0" class="iconfont el-icon-close" style="position: absolute;left: 0;top: 10px;cursor: pointer;"
                 @click="delArr('4',i)"></i>
            </div>
          </div>
          <el-button icon="el-icon-plus" type="text" @click="addArr('4')">添加贷款介绍</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formSub" :loading="drawer.load">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 绑定业务经理 -->
    <el-dialog title="绑定业务经理" :visible.sync="manager.flg" width="40%">
      <div>
        <p style="margin-bottom:10px;">选中的：</p>
        <div>
          <el-tag v-for="(item,index) in manager.arr" closable style="margin-right:10px;" @close="guwenDel(index)">{{item.aName}}</el-tag>
        </div>
      </div>
      <div class="handle-box" style="margin-top:20px;">
        <el-input placeholder="请输入名字查询" class="handle-input mr10" v-model="manager.kw"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="guwensouClick">搜索</el-button>
      </div>
      <el-table ref="guwen" :data="manager.tableData" border style="width: 100%" @selection-change="guwencheck">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="guwentableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="aName" width="200" label="姓名"></el-table-column>
        <el-table-column prop="aScore" label="评分"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="manager.page" :page-size="manager.limit"
                       :total="manager.totalCount" :pager-count="5" @current-change="guwenPageChange" @prev-click="guwenPageChange"
                       @next-click="guwenPageChange"></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="manager.flg = false">取 消</el-button>
        <el-button type="primary" @click="guwenSub" :loading="manager.load">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { webDproductInit, webDproductClassInit, webDproductClassChange, webDproductAdd, webDproductEditInit, webDproductEdit, webDproductDel, webDproductGuwenInit, webDproductupnext, webDadviserInit, webDproductGuwenSub } from '../../../api/index';
import CITYARR from '../../../utils/city';
import cosUpFile from '../../../utils/cos'

export default {
  data() {
    return {
      CITYARR: CITYARR,
      cityArr: [],
      query: {
        page: 1,
        limit: 10,
        totalCount: 0,
        kw: '',
        shang: '',
        status: '',
        time: ''
      },
      tableData: [{}],

      drawer: {
        editid: '',
        flg: false,
        load: false,
        classArr: [],
        typeArr: [],
        userArr: [],
        yongArr: [],
        qiArr: [],
        huanArr: [],
        teArr: [],
        form: {
          classid: '',
          leiid: [],
          userid: [],
          yongid: [],
          qiid: [],
          huanid: [],
          citystr: [],
          citycheck: [],
          citycode: [],
          name: '',
          img: '',
          seid: [],
          yelei: [{
            name: '',
            content: ''
          }],
          shenstr: [{
            name: '',
          }],
          zhunbei: [{
            name: '',
          }],
          jieshao: [{
            name: '',
          }],
        }
      },
      manager: {
        id: '',
        page: 1,
        limit: 10,
        kw: '',
        totalCount: 0,
        flg: false,
        load: false,
        tableData: [],
        arr: []
      },
    }
  },
  created() {
    this.CITYARR.forEach((item, i) => {
      this.cityArr.push({
        value: item.value + '-' + item.code,
        label: item.label,
        children: []
      })
      item.children.forEach(e => {
        this.cityArr[i].children.push({
          value: e.value + '-' + e.code,
          label: e.label,
        })
      })
    });
    this.getInit();
    this.classInit();
    this.guwenInit();
  },
  methods: {
    //初始化
    getInit() {
      webDproductInit({
        page: this.query.page,
        limit: this.query.limit,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        isShow: this.query.shang,
        isBind: this.query.status,
        kw: this.query.kw
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //初始化顾问列表
    guwenInit() {
      webDadviserInit({
        page: this.manager.page,
        limit: this.manager.limit,
        kw: this.manager.kw,
      }).then(res => {
        if (res.code == 0) {
          this.manager.tableData = res.recordList;
          this.manager.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //获取产品分类
    classInit() {
      webDproductClassInit().then(res => {
        if (res.code == 0) {
          this.drawer.classArr = res.typeList;
          this.drawer.userArr = res.useUser;
          this.drawer.yongArr = res.useLoan;
          this.drawer.qiArr = res.term;
          this.drawer.huanArr = res.repayment;
          this.drawer.teArr = res.characteristic;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //根据产品分类获取类型
    classChange(val, edval) {
      webDproductClassChange({
        parentId: val
      }).then(res => {
        if (res.code == 0) {
          this.drawer.typeArr = res.typeList;
          if (edval) {
            this.$set(this.drawer.form, 'leiid', edval);
          }
        } else {
          this.$message(res.msg);
        }
      })
    },
    //多个添加
    addArr(flg) {
      if (flg == '1') {
        this.drawer.form.yelei.push({
          name: '',
          content: ''
        })
      } else if (flg == '2') {
        this.drawer.form.shenstr.push({
          name: '',
        })
      } else if (flg == '3') {
        this.drawer.form.zhunbei.push({
          name: '',
        })
      } else if (flg == '4') {
        this.drawer.form.jieshao.push({
          name: '',
        })
      }
    },
    //删除多个
    delArr(flg, index) {
      if (flg == '1') {
        this.drawer.form.yelei.splice(index, 1);
      } else if (flg == '2') {
        this.drawer.form.shenstr.splice(index, 1);
      } else if (flg == '3') {
        this.drawer.form.zhunbei.splice(index, 1);
      } else if (flg == '4') {
        this.drawer.form.jieshao.splice(index, 1);
      }
    },
    //上传图片
    upimg(file) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          this.$set(this.drawer.form, 'img', 'https://' + data.Location);
          // this.$set(this.drawer.form, 'img', 'https://img2.baidu.com/it/u=3684117954,695988885&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400');
        }
      })
      return false;
    },
    //选择城市
    cityChange(val) {
      this.drawer.form.citycheck = [val[0].split("-")[0], val[1].split("-")[0]];
      this.drawer.form.citycode = val[1].split("-")[1];
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getInit();
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getInit();
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //新增
    addClick() {
      this.drawer.flg = true;
      this.drawer.form = {
        classid: '',
        leiid: [],
        userid: [],
        yongid: [],
        qiid: [],
        huanid: [],
        citystr: [],
        citycheck: [],
        citycode: [],
        name: '',
        img: '',
        seid: [],
        yelei: [{
          name: '',
          content: ''
        }],
        shenstr: [{
          name: '',
        }],
        zhunbei: [{
          name: '',
        }],
        jieshao: [{
          name: '',
        }],
      }
    },
    //编辑初始化
    editClick(item) {
      webDproductEditInit({
        productId: item.pId,
      }).then(res => {
        if (res.code == 0) {
          this.drawer.flg = true;
          this.drawer.editid = item.pId;
          this.drawer.form.classid = res.info.typeId;
          this.classChange(res.info.typeId, res.typeList);
          // this.$set(this.drawer.form, 'leiid', res.typeList);
          // this.drawer.form.leiid = res.typeList;
          this.drawer.form.userid = res.useUser;
          this.drawer.form.yongid = res.useLoan;
          this.drawer.form.qiid = res.term;
          this.drawer.form.huanid = res.repayment;
          this.drawer.form.seid = res.characteristic;
          this.drawer.form.name = res.info.pName;
          this.drawer.form.name = res.info.pName;
          this.drawer.form.img = res.info.pic;
          this.drawer.form.yelei = JSON.parse(res.info.businessType);
          this.drawer.form.shenstr = JSON.parse(res.info.applyCondition);
          this.drawer.form.zhunbei = JSON.parse(res.info.readyData);
          this.drawer.form.jieshao = JSON.parse(res.info.introduce);
          //城市
          this.drawer.form.citycheck = JSON.parse(res.info.cityName);
          this.drawer.form.citycode = res.info.cityCode;
          this.cityArr.forEach(item => {
            if (item.label == JSON.parse(res.info.cityName)[0]) {
              this.drawer.form.citystr = [item.value, JSON.parse(res.info.cityName)[1] + '-' + res.info.cityCode]
            }
          })
        } else {
          this.$message(res.msg);
        }
      })
    },
    //删除
    delClick(id) {
      webDproductDel({
        pid: id
      }).then(res => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //提交
    formSub() {
      this.drawer.load = true;
      let obj = {
        pId: this.drawer.editid,
        dType: this.drawer.form.leiid,
        userList: this.drawer.form.userid,
        useList: this.drawer.form.yongid,
        termList: this.drawer.form.qiid,
        repaymentList: this.drawer.form.huanid,
        characteristicList: this.drawer.form.seid,
        pName: this.drawer.form.name,
        typeId: this.drawer.form.classid,
        pic: this.drawer.form.img,
        businessType: JSON.stringify(this.drawer.form.yelei),
        applyCondition: JSON.stringify(this.drawer.form.shenstr),
        readyData: JSON.stringify(this.drawer.form.zhunbei),
        introduce: JSON.stringify(this.drawer.form.jieshao),
        cityName: JSON.stringify(this.drawer.form.citycheck),
        cityCode: this.drawer.form.citycode
      };
      if (this.drawer.editid) {
        webDproductEdit(obj).then(res => {
          this.drawer.load = false;
          if (res.code == 0) {
            this.drawer.flg = false;
            this.$message.success('编辑成功');
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        webDproductAdd(obj).then(res => {
          this.drawer.load = false;
          if (res.code == 0) {
            this.drawer.flg = false;
            this.$message.success('新增成功');
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      }

    },
    //上架下架
    upNextClick(id, flg) {
      webDproductupnext({
        pid: id,
        isShow: flg
      }).then(res => {
        if (res.code == 0) {
          this.$message.success("操作成功");
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //顾问列表序号
    guwentableIndex(index) {
      return (this.manager.page - 1) * this.manager.limit + index + 1;
    },
    //顾问列表翻页
    guwenPageChange(num) {
      this.manager.page = num;
      this.guwenInit();
    },
    //顾问列表搜索
    guwensouClick() {
      this.manager.page = 1;
      this.guwenInit();
    },
    //顾问多选
    guwencheck(arr) {
      let arrid = arr.map(item => {
        return item.aId
      })
      let checkarr = this.manager.arr.map(item => {
        return item.aId
      })
      arrid.forEach((item, index) => {
        if (checkarr.indexOf(item) == -1) {
          this.manager.arr.push(arr[index]);
        }
      })
    },
    //绑定业务经理
    managerClick(id) {
      this.manager.flg = true;
      this.manager.id = id;
      this.getguwenInit(id);
    },
    //选中产品顾问初始化
    getguwenInit(id) {
      webDproductGuwenInit({
        pid: id
      }).then(res => {
        if (res.code == 0) {
          this.manager.arr = res.adviseList;
          this.$refs.guwen.clearSelection();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //选中顾问提交
    guwenSub() {
      let idarr = this.manager.arr.map(item => {
        return item.aId;
      })
      this.manager.load = true;
      webDproductGuwenSub({
        pid: this.manager.id,
        aid: idarr
      }).then(res => {
        this.manager.load = false;
        if (res.code == 0) {
          this.manager.flg = false;
          this.$message.success('添加成功');
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //删除选中
    guwenDel(index) {
      this.manager.arr.splice(index, 1);
    },
  }
}
</script>
<style scoped>
/deep/ :focus {
    outline: 0;
}
.drawerCan {
    padding: 20px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
</style>